import React, { Component } from 'react'
import {
    NavBar,
    WingBlank,
    List,
    InputItem,
    WhiteSpace,
    Button,
    Toast
} from 'antd-mobile'
import { Redirect } from 'react-router-dom'
import { createForm } from 'rc-form'
import { connect } from 'react-redux'

import { login } from '../../redux/action'

import Logo from '../../compoments/logo/logo'

class Login extends Component{
    state = {
        username:'',
        password:'',
    }
    login = () =>{
        this.props.form.validateFields((error, value) => {
            if(error){
               if (error.username){
                   Toast.fail(error.username.errors[0].message, 1);
               }else if (error.password){
                   Toast.fail(error.password.errors[0].message, 1)
               }
            }else {
                this.setState(value,()=>{
                    const { username, password } = this.state
                    this.props.login(username,password)
                })

            }
        })

    }
    toRegister = () =>{
        this.props.history.replace('/register')
    }

    render() {
        let errors
        const { getFieldProps,getFieldError } = this.props.form
        const { redirectTo } = this.props.user
        if (redirectTo) {
            return <Redirect to={redirectTo}/>
        }
        return(
            <div>
                <NavBar>&nbsp;直&nbsp;聘&nbsp;项&nbsp;目&nbsp;</NavBar>
                <Logo />
                <WingBlank size="lg">
                    <List>
                        <InputItem
                            {...getFieldProps('username',{
                                rules:[
                                    { required: true, whitespace:true, message: '请输入用户名' },
                                    { min: 4, message: '用户名至少4位' },
                                    { max: 12, message: '用户名最多12位' },
                                ]
                            })}
                            placeholder='请输入用户名'
                        >用户名：</InputItem>
                        <WhiteSpace />
                        <InputItem
                            {...getFieldProps('password',{
                                rules:[
                                    { required: true, whitespace:true, message: '请输入密码' },
                                    { min: 4, message: '密码至少4位' },
                                    { max: 12, message: '密码最多12位' },
                                ]
                            })}
                            type='password'
                            placeholder='请输入密码'
                        >密&nbsp;&nbsp;&nbsp;码：</InputItem>
                        <WhiteSpace/>
                        <WhiteSpace/>
                        <Button type='primary' onClick={this.login}> 登录 </Button>
                        <WhiteSpace/>
                        <Button  onClick={this.toRegister}>注册帐号 </Button>
                        {(errors = getFieldError('required')) ? errors.join(',') : null}
                    </List>
                </WingBlank>
            </div>
        )

    }
}
createForm()(Login)


export default connect(
state =>({ user:state.user }),
{ login }

)(createForm()(Login))